import CodeView from '../../../shared/components/CodeView';
import Blockquote from '../../../shared/components/Blockquote';
import { getDisplayElementById } from '../../shared/helpers';
import * as List from './list/example';
import * as RadioGroup from './radio-group/example';

<div className="doc lead">
  Navigation represents a list of links that either take the user to another
  page or parts of the page the user is in.
</div>

## List

<CodeView>
  {getDisplayElementById(List.default)}
</CodeView>

<Blockquote type="a11y" header="Accessibility Note">
  <p>
    The <code>aria-current</code> attribute is used when an element within a set (e.g., navigation list items) is styled to indicate the selected or active item. In our use case, the attribute should be placed on the <code>slds-nav-vertical__action</code> link element. In our example above, we're using the generic <code>true</code> value, but the attribute will accept a variety of options depending on your use case.
  </p>
  <p>
  For more information on <code>aria-current</code>, please visit the <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-current">W3C specification page</a>.
  </p>
</Blockquote>

### States

#### Collapsed
<CodeView>
  {getDisplayElementById(List.states, 'collapsed')}
</CodeView>

#### Expanded
<CodeView>
  {getDisplayElementById(List.states, 'expanded')}
</CodeView>

### Examples

#### Compact
<CodeView>
  {getDisplayElementById(List.examples, 'compact')}
</CodeView>

#### Items with Icons
<CodeView>
  {getDisplayElementById(List.examples, 'items-with-icons')}
</CodeView>

#### Items with Notifications
<CodeView>
  {getDisplayElementById(List.examples, 'items-with-notifications')}
</CodeView>

#### Shaded Background
<CodeView>
  {getDisplayElementById(List.examples, 'shade')}
</CodeView>

#### Quickfind
<CodeView>
  {getDisplayElementById(List.examples, 'quickfind')}
</CodeView>

## Radio Group

The radio group variant should be used when your vertical navigation acts as a selection or filter on content, like within a modal. If the vertical navigation takes the user to another page or part of a page, use the standard List version. If your content changes entirely whenever options in the navigation are selected, instead of filtering one master list, then use the [Vertical Tabs](/components/vertical-tabs) component.

<CodeView>
  {getDisplayElementById(RadioGroup.default)}
</CodeView>

### Examples

#### Compact
<CodeView>
  {getDisplayElementById(RadioGroup.examples, 'compact')}
</CodeView>

#### Shaded Background
<CodeView>
  {getDisplayElementById(RadioGroup.examples, 'shade')}
</CodeView>
